// Popup related css classes

.popup-arrow {
  width:0;
  height:0;
  position:fixed;

  &.up {
    border-left: @arrow-size solid transparent;
    border-right: @arrow-size solid transparent;
    border-bottom-width: @arrow-size;
    border-bottom-style: solid;
  }
  &.down {
    border-left: @arrow-size solid transparent;
    border-right: @arrow-size solid transparent;
    border-top-width: @arrow-size;
    border-top-style: solid;
  }
  &.left {
    border-top: @arrow-size solid transparent;
    border-bottom: @arrow-size solid transparent;
    border-right-width: @arrow-size;
    border-right-style: solid;
  }
  &.right {
    border-top: @arrow-size solid transparent;
    border-bottom: @arrow-size solid transparent;
    border-left-width: @arrow-size;
    border-left-style: solid;
  }
}

.popup {
  position:fixed;
  max-width:250px; // Maximum width.
  max-height:600px; // Maximum height. If its too much simply scroll.
  overflow-y: auto;
  overflow-x: hidden;

  // TOC links
  a.toc-link {
    text-decoration:none;
    display:block;
    line-height:150%;
    padding:4px;
    overflow-x: hidden;
    white-space:nowrap;
  }

  p {
    margin:10px;
    text-align:center;
  }

  table {
    vertical-align:middle;

    td { padding:4px; }
  }

  button {
    border:none;
    font-size:200%;
    width:100%;
    padding:10px;
    display:block;
    text-align:center;
  }

  // Elements inside popups
  form {
    input {
      padding:5px;
      font-size:200%;
      display:block;
      border:none;
      width:100%;
      text-align:center;

      &:focus { outline:0; }

      &.small {
        font-size:140%;
        text-align:left;
      }
    }

    input[type="checkbox"] {
      display:inline-block;
      margin:5px;
      width:auto;
    }

    label {
      display: inline-block;
      margin:5px;
    }
  }

  // Share buttons
  .row {
    display:flex;
  }
  .btn-share {
    flex-grow:1;
    width:46px;
    height:46px;
    line-height:46px;
    text-align:center;
    transition:0.2s all ease;
    cursor:default;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;

    &.htm {
      background-image: url('../img/html5.svg');
      &:hover {
        /* W3C color code */
        background-color:rgb(78, 175, 87);
      }
    }

    &.pdf {
      background-image: url('../img/pdf.svg');
      &:hover {
        /* Adobe reader PDF color code */
        background-color:lighten(rgb(253, 48, 26), 20%);
      }
    }

    &.docx {
      background-image: url('../img/docx.svg');
      &:hover {
        /* MS Word color code */
        background-color:lighten(rgb(45, 88, 151), 20%);
      }
    }

    &.odt {
      background-image: url('../img/odt.svg');
    }

    &.odt, &.tex, &.plain {
      color:rgba(20, 20, 20, 1);
      &:hover { background-color:rgba(220, 220, 220, 1); color:black; }
    }

    &.revealjs,
    &.revealjs-beige, &.revealjs-black, &.revealjs-league, &.revealjs-moon,
    &.revealjs-serif, &.revealjs-sky, &.revealjs-solarized, &.revealjs-white {
      &:before {
        font-family: @font-icon;
        content: "\f0c4";
      }
    }

    &.revealjs {
      &:before { content: '\f50b'; } // Lens icon, looks better and fits into "reveal"
      color: rgba(120, 120, 120, 1);
      &:hover { background-color: rgba( 40,  40,  40, 1); color: white; }
    }

    // revealJS theme buttons
    &.revealjs-beige {
      color: #333333;
      background-color: #f7f2d3;
      &:hover { background-color: darken(#f7f2d3, 20%); color: #333333; }
    }
    &.revealjs-black {
      color: #ffffff;
      background-color: #222222;
      &:hover { background-color: lighten(#222222, 20%); color: #ffffff; }
    }
    &.revealjs-league {
      color: #71e9f4;
      background-color: #555a5f;
      &:hover { background-color: lighten(#555a5f, 20%); color: lighten(#71e9f4, 20%); }
    }
    &.revealjs-moon {
      color: #268bd2;
      background-color: #002b36;
      &:hover { background-color: lighten(#002b36, 20%); color: lighten(#268bd2, 20%); }
    }
    &.revealjs-serif {
      color: #383d3d;
      background-color: #f0f1eb;
      &:hover { background-color: darken(#f0f1eb, 10%); color: #383d3d; }
    }
    &.revealjs-sky {
      color: #333333;
      background-color: #add9e4;
      &:hover { background-color: darken(#add9e4, 10%); color: #333333; }
    }
    &.revealjs-solarized {
      color: #657b83;
      background-color: #fdf6e3;
      &:hover { background-color: darken(#fdf6e3, 10%); color: #657b83; }
    }
    &.revealjs-white {
      color: #222222;
      background-color: white;
      &:hover { background-color: darken(white, 20%); color: #222222; }
    }
    // END revealJS theme buttons

    &.rst {
      color: rgb(28, 78, 98);
      &:hover { color: white; background-color: rgb(28, 78, 98); } // This is literally the first colour I found on the web for rst
    }

    &.rtf {
      color: rgb(223, 51, 68);
      &:hover { background-color: rgb(223, 51, 68); color: white; }
    }

    &.org {
      color: lighten(rgb(0, 42, 53), 10%);
      &:hover { background-color: rgb(0, 42, 53); color: white; }
    }

    &.textbundle {
      color: #00b58c;
      &:hover { background-color: #00b58c; color:white; }
    }

    &.textpack {
      color: lighten(#0b0080, 20%);
      &:hover { background-color: #0b0080; color: white; }
    }
  }

  // The revealjs theme selector's visibility
  #reveal-themes {
    transition:0.2s height ease;
    height:46px * 2; // Share button height times 2
    overflow:hidden;
    &.hidden {
      height:0px;
    }
  }

  // Formatting
  .formatting {
    a {
      text-decoration:none;
      display:block;
      padding:5px 10px;

      &#header-formatting {
        display:flex;
        &::before {
          font-family: inherit;
          font-weight: bold;
          padding:10px 0px;
        }
      }

      span.markdownHeading1,
      span.markdownHeading2,
      span.markdownHeading3,
      span.markdownHeading4,
      span.markdownHeading5,
      span.markdownHeading6 {
        display:inline-block;
        padding:5px 0px;
        flex: 1;
        text-align:center;
        font-weight:bold;
      }

      &::before {
        font-family: @font-icon;
        font-size:@font-size-small * 0.8;
        padding-right:5px;
        width:30px;
        display:inline-block;
      }
    }

    #header-formatting.markdownHeading1::before { content: "H1"; }
    #header-formatting.markdownHeading2::before { content: "H2"; }
    #header-formatting.markdownHeading3::before { content: "H3"; }
    #header-formatting.markdownHeading4::before { content: "H4"; }
    #header-formatting.markdownHeading5::before { content: "H5"; }
    #header-formatting.markdownHeading6::before { content: "H6"; }

    .markdownBlockquote::before         { content: '\f328'; }
    .markdownLink::before               { content: "\f022"; }
    .markdownImage::before              { content: "\22b7"; }
    .markdownCode::before               { content: "\f743"; }
    .markdownMakeOrderedList::before    { content: "\f4c3"; }
    .markdownMakeUnorderedList::before  { content: "\f4c2"; }
    .markdownDivider::before            { content: "\f1cc"; }
    .insertFootnote::before             { content: "\f1eb"; }

    .markdownBold {
      font-weight:bold;
      &::before { content: "\f1f4"; }
    }

    .markdownItalic {
      font-style:italic;
      &::before { content: "\f1f5"; }
    }

    .removeFootnote::before {
      content: "\f1eb";
      text-decoration:line-through;
    }

    hr {
      margin:14px 20px;
      border:none;
      border-bottom-width:1px;
      border-bottom-style: solid;
    }
  }

  // SEARCH POPUP
  .search {
    .row { display: flex; }
    input {
      /** flex layout of the search popup:
      * 6 4
      * 6 3 1
      */
      font-size:100%;
      flex: 0 6 auto; // 60 percent width -- set first param to 0 for alignment
      text-align:left;
      width:60%;
      background-color: transparent;
      color:inherit;
      padding:5px;
      border:none;
      &:focus {
        outline:0;
      }

      // Use monospaced font for regular expressions.
      &.regexp { font-family: @font-code; }
    }

    button {
      width:auto;
      padding:5px 2px;
      margin:0px;
      border-radius:2px;
      overflow:hidden;
      outline: 0;

      &#searchNext { flex: 4 4 auto; } // 40 percent width
      &#replaceNext { flex: 3 3 auto; } // 30 percent width
      &#replaceAll { flex: 1 1 auto; } // 10 percent width
    }
  }

  .pomodoro p {
    font-size: 2em;
  }

  // Footnote edit popup
  .footnote-edit {
    textarea {
      font-size:@font-size-base;
      min-height:150px;
      border:none;
      width:250px; // Maximum width

      &:focus { outline:0; }
    }
  }

  // Writing target popup
  .set-target {
    input[type="number"] {
      display: inline-block;
      font-size: 150%;
      width: 30%;

      // Remove the up/down counter
      &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }

    select {
      display: inline-block;
      width: 45%;
      font-size: 150%;
      border: none;
      border-radius: 0px;
      background-color: transparent;
      color: inherit;
    }

    button[type="submit"] {
      display: inline-block;
      width: 20%;
      font-size: 150%;
      margin: 0 auto;
    }
  }
}
